<template>
    <div>
        <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: left">
            <el-form-item label="电影名称" prop="movieName">
                <el-input v-model="ruleForm.movieName"></el-input>
            </el-form-item>
            <el-form-item label="电影介绍" prop="introduction">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="ruleForm.introduction">
                </el-input>
            </el-form-item>
            <el-form-item label="电影类型" prop="movieTypeList">
                <el-transfer v-model="ruleForm.movieTypeList" :data="data"></el-transfer>
            </el-form-item>
            <el-form-item label="语言" prop="language">
                <el-input v-model="ruleForm.language"></el-input>
            </el-form-item>
            <el-form-item label="时长" required prop="time">
                <el-input v-model="ruleForm.time"></el-input>
            </el-form-item>
            <el-form-item label="上映时间" required style="text-align: center">
                <el-col :span="11">
                    <el-form-item prop="releaseDate">
                        <el-date-picker type="datetime" value-format="timestamp" placeholder="选择日期" v-model="ruleForm.releaseTime" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="下映时间" required style="text-align: center">
                <el-col :span="11">
                    <el-form-item prop="endDate">
                        <el-date-picker type="datetime" value-format="timestamp" placeholder="选择日期" v-model="ruleForm.endTime" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="图片" prop="moviePic">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8081/common/uploadPicture"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.moviePic" :src="ruleForm.moviePic" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="片源地" prop="source">
                <el-input v-model="ruleForm.source"></el-input>
            </el-form-item>
            <el-form-item label="导演" prop="actorDirector">
                <el-select v-model="ruleForm.actorDirector" filterable placeholder="请选择">
                    <el-option
                            v-for="item in directorData"
                            :key="item.key"
                            :label="item.label"
                            :value="item.key">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button type="primary" @click="addActor" v-if="this.$route.query.id != undefined">添加演员</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "MovieAddView",
        data() {
            const generateData = _ => {
                const data=[];
                this.axios.get("manage/movieType/list").then(response=>{
                    var movieTypes=response.data.data;
                    movieTypes.forEach((movieType) => {
                        data.push({
                            label: movieType.movieTypeName,
                            key: movieType.id
                        });
                    });
                })
                return data;
            };
            const directorData = _ =>{
                const data = [];
                this.axios.get("manage/actor/findDirector").then(response=>{
                    var directors=response.data.data;
                    directors.forEach((director) => {
                        data.push({
                            label: director.name,
                            key: director.id
                        });
                    });
                })
                return data;
            }
            return {
                imageUrl: void 0,
                data: generateData(),
                directorData: directorData(),
                ruleForm: {
                    id: this.$route.query.id,
                    movieName: '',
                    introduction: '',
                    language: '',
                    time: '',
                    releaseTime: '',
                    endTime: '',
                    moviePic: '',
                    source: '',
                    actorDirector: '',
                    movieTypeList: [],
                    participatingList: this.$route.query.movieActorList
                },
                rules: {
                    // name: [
                    //     { required: true, message: '请输入活动名称', trigger: 'blur' },
                    //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    // ],
                    // region: [
                    //     { required: true, message: '请选择活动区域', trigger: 'change' }
                    // ],
                    // releaseTime: [
                    //     { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    // ],
                    // resource: [
                    //     { required: true, message: '请选择活动资源', trigger: 'change' }
                    // ],
                    // desc: [
                    //     { required: true, message: '请填写活动形式', trigger: 'blur' }
                    // ]
                }
            }
        },
        created() {
            this.handleFindId();
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    this.axios.post("manage/movie/saveOrUpdate",this.ruleForm,{params:{
                        movieActorList: this.movieActorList
                      }}).then(response=>{
                        if (response.data.code==200){
                            this.$router.push({path: "/movie/list"});
                        }
                    })
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleFindId() {
                if (this.$route.query.id != undefined){
                    this.handleFindMovieById();
                }
            },
            handleFindMovieById(){
                this.axios.get("manage/movie/findMovieById", {params: {id:this.$route.query.id}}).then(response=>{
                    if (response.data.code == 200) {
                        this.ruleForm.movieName = response.data.data.movieName;
                        this.ruleForm.introduction = response.data.data.introduction;
                        this.ruleForm.language = response.data.data.language;
                        this.ruleForm.time = response.data.data.time;
                        this.ruleForm.releaseTime = Date.parse(response.data.data.releaseTime);
                        this.ruleForm.endTime = Date.parse(response.data.data.endTime);
                        this.ruleForm.moviePic = response.data.data.moviePic;
                        this.ruleForm.source = response.data.data.source;
                        this.ruleForm.actorDirector = response.data.data.actorDirector;
                        this.ruleForm.movieTypeList = response.data.data.movieTypeList;
                    }
                })
            },
            addActor(){
                this.$router.push({path: "/movie/addActor" , query: {
                    movieId: this.ruleForm.id
                }})
            },
            handleAvatarSuccess(res,file) {
              this.ruleForm.moviePic = res.msg;
              this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg';
              const isLt2M = file.size / 1024 / 1024 < 2;

              if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
              }
              if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
              }
              return isJPG && isLt2M;
            }
        }
    }
</script>

<style scoped>
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>